<template>
  <div class="strut-div">
    <div id="gov-radar" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: "GovRadarChart",
    props: ['config'],
    data() {
      return {
        chart: null,
      }
    },
    methods: {
      initChart() {
        console.log('initRadarChart');
        let option = {
          radar: [
            {

              center: ['50%', '50%'],
              radius: 70,
              startAngle: 120,
              name: {                             // (圆外的标签)雷达图每个指示器名称的配置项。
                formatter: function (params, dataSources) {
                  return params + "  " + dataSources.value;
                },
                width: '20',
                height: '10',
                textStyle: {
                  fontSize: 12,
                  // color: '#FBCC13',
                  color: '#fff'
                }
              },
              nameGap: 15,                        // 指示器名称和指示器轴的距离。[ default: 15 ]
              splitNumber: 5,                     // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
              axisLine: {                         // (圆内的几条直线)坐标轴轴线相关设置
                lineStyle: {
                  color: '#FF9600',                   // 坐标轴线线的颜色。
                  width: 1,                      	 // 坐标轴线线宽。
                  type: 'solid',                   // 坐标轴线线的类型。
                }
              },
              splitLine: {                        // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
                lineStyle: {
                  color: '#735021',                       // 分隔线颜色
                  width: 2, 							 // 分隔线线宽
                }
              },
              splitArea: {                        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: false,
                areaStyle: {                            // 分隔区域的样式设置。
                  color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],       // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                }
              },
              indicator: [
                {text: '本周申请', max: 50, value: '18'},
                {text: '本周受理', max: 50, value: '40'},
                {text: '本周办结', max: 50, value: '23'},
                {text: '本周红牌', max: 50, value: '20'},
                {text: '本周黄牌', max: 50, value: '22'},
                {text: '全部整改', max: 50, value: '42'}
              ]
            }
          ],
          series: [
            {
              name: '成绩单',
              type: 'radar',
              itemStyle: {                // 折线拐点标志的样式。
                normal: {                   // 普通状态时的样式
                  lineStyle: {
                    width: 1
                  },
                  opacity: 0.2
                },
                emphasis: {                 // 高亮时的样式
                  lineStyle: {
                    width: 5
                  },
                  opacity: 1
                }
              },
              data: [
                {
                  value: [18, 40, 23, 20, 22, 42],
                  symbol: 'circle',                   // 单个数据标记的图形。
                  symbolSize: 5,
                  name: '数据',
                  label: {                    // 单个拐点文本的样式设置
                    normal: {
                      show: false,             // 单个拐点文本的样式设置。[ default: false ]
                      position: 'top',        // 标签的位置。[ default: top ]
                      distance: 5,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                      color: 'rgba(255,0,0,1)',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                      fontSize: 14,           // 文字的字体大小
                      formatter: function (params) {
                        return params.value;
                      }
                    }
                  },
                  itemStyle: {                // 单个拐点标志的样式设置。
                    normal: {
                      borderColor: 'rgba(255,0,0,0.2)',       // 拐点的描边颜色。[ default: '#000' ]
                      borderWidth: 0.5,                        // 拐点的描边宽度，默认不描边。[ default: 0 ]
                    }
                  },
                  lineStyle: {                // 单项线条样式。
                    normal: {
                      opacity: 0.5            // 图形透明度
                    }
                  },
                  areaStyle: {
                    normal: {
                      opacity: 0.9,
                      color: new echarts.graphic.RadialGradient(0.4, 0.4, 1, [
                        {
                          color: '#FF621F',
                          offset: 0
                        },
                        {
                          color: '#FFD942',
                          offset: 1
                        }
                      ])
                    }
                  }
                }
              ]
            }
          ]
        }

        setTimeout(() => {
          // option.xAxis.data = ['行政处罚', '周二', '周三', '周四', '周五', '周六', '周日'];
          // option.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320];

          this.chart.setOption(option);
        }, 300);

      },
      refreshChart() {

      },
    },
    mounted() {
      console.log("mounted");
      this.chart = echarts.init(document.getElementById('gov-radar'));
    }

  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
